<template>
  <div class="user_list">
    <search v-model="searchVal" @on-submit="onSubmit" :auto-fixed="false"></search>
     <div class="list_cell">
        <img :src="figure || 'https://cdn.hbjxqp.happypoker.cn/static/img/avatar.png'" alt="头像">
            <div class="user_text">
            <h4>{{nick}}</h4>
            <p>{{id}}</p>
        </div>
    </div>
    <x-button class="fix_btn" type="primary" @click.native="submit()">添加至亲友圈白名单</x-button>
  </div>
</template>

<script>
import { XButton, Toast, Search} from "vux";
export default {
  data() {
    return {
      searchVal: null, //储存搜索输入框中的数据
      id: null,
      nick: null,
      figure: null
    };
  },
  components: {
    Toast,
    Search,
    XButton
  },
  methods: {
    onSubmit(val) {
      /**
       * 搜索成功后带参数跳转到成功页面
       * 失败后跳转失败页面
       */
      this.apiService.user
        .getplayerinfo({
          playerid: val
        })
        .then(res => {
          this.id = res.data.id;
          this.nick = res.data.nick;
          this.figure = res.data.figure;
        });
    },
    submit() {
      this.apiService.club
        .adduser({
          clubid: this.$route.query.clubId,
          whitelisttype: this.$route.query.whiteListType,
          playerids: this.searchVal
        })
        .then(res => {
          this.toast("success", res.msg);
        })
        .catch(() => {
          this.toast("cancel", res.msg);
        });
    },
    //显示弹框函数
    toast(type, val, width) {
      const _this = this;
      if (val) {
        this.$vux.toast.show({
          type: type, //弹框类型
          text: val,
          width: width
        });
      } else {
        this.$vux.toast.hide();
      }
    }
  }
};
</script>

<style scoped>
.user_list {
  padding-bottom: 60px;
  height: 100vh;
}
.fix_btn {
  width: 90%;
  /* position: fixed;
  top: 150px;
  left: 5%; */
}
.user_list .list_cell {
  padding: 10px 15px;
  margin: 20px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  border: 1px solid #ccc;
}
.user_list .list_cell img {
  margin-right: 0.8em;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.user_list .user_text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.user_list .user_text h4 {
  font-weight: 400;
  font-size: 16px;
}
.user_list .user_text p {
  color: #999999;
  font-size: 14px;
}
</style>